<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- ===== CSS ===== -->
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" href="./iconfont/iconfont.css">

        <!-- ===== BOX ICONS ===== -->
        <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>

        <title>个人简历 | 张笑嘉</title>
    </head>
    <body>
        <!--===== HEADER =====-->
        <header class="l-header">
            <nav class="nav bd-grid">
                <div class="nav__toggle" id="nav-toggle">
                    <i class='bx bx-menu'></i>
                </div>

                <div>
                    <a href="#" class="nav__logo">张笑嘉</a>
                </div>

                <div class="nav__menu" id="nav-menu">
                    <div class="nav__close" id="nav-close">
                        <i class='bx bx-x'></i>
                    </div>

                    <ul class="nav__item"><a href="#home" class="nav__link active">首页</a></ul>
                    <ul class="nav__item"><a href="#about" class="nav__link">基本信息</a></ul>
                    <ul class="nav__item"><a href="#skills" class="nav__link">编程能力</a></ul>
                    <ul class="nav__item"><a href="#education" class="nav__link">教育背景</a></ul>
                    <ul class="nav__item"><a href="#services" class="nav__link">实习经历</a></ul>
                    <ul class="nav__item"><a href="#works" class="nav__link">项目经历</a></ul>
                    <!-- <ul class="nav__item"><a href="#contact" class="nav__link">联系方式</a></ul> -->
                    
                </div>
            </nav>
        </header>

        <main class="l-main">
            <!--===== HOME =====-->
            <section class="home" id="home">
                <div class="home__container bd-grid">
                    <div class="home__data">
                        <div class="home__img">
                            <img src="img/perfil.png" alt="">
                        </div>

                        <h1 class="home__title">张笑嘉</h1>
                        <span class="home__profession">初级前端开发</span>

                        <!-- <div class="home__social">
                            <a href="https://www.instagram.com/cjj_i5/" class="home__social-link" target="blank"><i class="iconfont icon-instagram"></i></a>
                            <a href="#lianxi" class="home__social-link"><i class="iconfont icon-weixin"></i></a>
                            <a href="https://www.zhihu.com/people/zhang-xiao-jia-24-69" class="home__social-link" target="blank"><i class="iconfont icon-zhihu"></i></a>
                            <a href="https://gitee.com/chuanjiujiu" class="home__social-link" target="blank"><i class="iconfont icon-gitee-fill-round"></i></a>
                        </div> -->

                        <a href="resume.pdf" class="button home__button" download="19801326330.pdf" target="blank">下载简历pdf</a>
                    </div>
                </div>
            </section>

            <!--===== ABOUT =====-->
            <section class="about section" id="about">
                <span class="section-subtitle">我的简介</span>
                <h2 class="section-title">关于我</h2>

                <div class="about__container bd-grid">
                    <div class="about__data">
                        <p class="about__description">21岁，毕业于北京服装学院，本科服装设计与工程专业。
                            2022年硕士就读于北京航空航天大学非全日制电子信息专业。<br>                 
                            技术栈：HTML、CSS、JavaScript、VUE框架、熟练使用git版本控制。<br>
                            基本技能：Office办公软件；使用Axure、墨刀、Xmind制作PRD文档；
                            熟练使用AI、PS输出设计图；
                            熟练使用CLO3D进行服装和人物建模。<br>
                            业余插画家，上架多款微信表情。
                        </p>
                        <!-- <img src="img/about.png" alt="" class="about__img"> -->
                    </div>

                    <div>
                        <div class="about__information">
                            <h3 class="about__information-title" id="lianxi">联系方式</h3>
    
                            <div class="about__information-data">
                                <i class='bx bx-user about__information-icon'></i>
                                <span>微信chuanjiujiuzxj</span>
                            </div>
    
                            <div class="about__information-data">
                                <i class='bx bx-phone about__information-icon'></i>
                                <span>电话19801326330</span>
                            </div>
    
                            <div class="about__information-data">
                                <i class='bx bx-envelope about__information-icon'></i>
                                <span>邮箱1154914252@qq.coms</span>
                            </div>

                        </div>
    
                        <!-- <div class="about__information">
                            <h3 class="about__information-title">经验和技术</h3>
    
                            <div class="about__information-data">
                                <i class='bx bx-medal about__information-icon'></i>
                                <div>
                                    <span class="about__information-subtitle">1年</span>
                                    <span class="about__information-subtitle-small">经验</span>
                                </div>
                            </div>
    
                            <div class="about__information-data">
                                <i class='bx bx-briefcase about__information-icon'></i>
                                <div>
                                    <span class="about__information-subtitle">3个</span>
                                    <span class="about__information-subtitle-small">项目</span>
                                </div>
                            </div>
    
                            <div class="about__information-data">
                                <i class='bx bx-support about__information-icon'></i>
                                <div>
                                    <span class="about__information-subtitle">插画</span>
                                    <span class="about__information-subtitle-small">设计</span>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </section>

            <!--===== SKILLS =====-->
            <section class="skill section" id="skills">
                <span class="section-subtitle">技术栈</span>
                <h2 class="section-title">我的技能</h2>

                <div class="skill__container bd-grid">
                    <div class="skills__content">
                        <h3 class="skills__subtitle">前端开发</h3>

                        <div class="skills__data">
                            <span class="skills__name">Html/css</span>
                            <span class="skills__number">80%</span>
                            <span class="skills__bar skills__html"></span>
                        </div>

                        <div class="skills__data">
                            <span class="skills__name">Javascript</span>
                            <span class="skills__number">90%</span>
                            <span class="skills__bar skills__js"></span>
                        </div>

                        <div class="skills__data">
                            <span class="skills__name">Vue</span>
                            <span class="skills__number">90%</span>
                            <span class="skills__bar skills__vue"></span>
                        </div>

                        <!-- <div class="skills__data">
                            <span class="skills__name">Angular</span>
                            <span class="skills__number">80%</span>
                            <span class="skills__bar skills__angular"></span>
                        </div> -->
                    </div>

                    <div class="skills__content">
                        <h3 class="skills__subtitle">其他技能</h3>

                        </div>

                        <div class="skills__data">
                            <span class="skills__name">插画设计</span>
                            <span class="skills__number">80%</span>
                            <span class="skills__bar skills__illustrate"></span>
                        </div>

                        <div class="skills__data">
                            <span class="skills__name">产品经理</span>
                            <span class="skills__number">30%</span>
                            <span class="skills__bar skills__pm"></span>
                        </div>
                    </div>
                </div>
            </section>

            <!--===== EDUCATION =====-->
            <section class="education section" id="education">
                <span class="section-subtitle">资历</span>
                <h2 class="section-title">教育背景</h2>

                <div class="education__container bd-grid">
                    <div class="education__content">
                        <div>
                            <h3 class="education__year">2018 — 2022</h3>
                            <span class="education__university">专业</span>
                        </div>

                        <div class="education__time">
                            <span class="education__rounder"></span>
                            <span class="education__line"></span>
                        </div>

                        <div>
                            <h3 class="education__race">北京服装学院</h3>
                            <span class="education__specialty">服装设计与工程</span>
                        </div>
                    </div>

                </div>

                <div class="education__container bd-grid">
                    <div class="education__content">
                        <div>
                            <h3 class="education__year">2022 — 2025</h3>
                            <span class="education__university">专业</span>
                        </div>



                        <div class="education__time">
                            <span class="education__rounder"></span>
                            <span class="education__line"></span>
                        </div>

                        <div>
                            <h3 class="education__race">北京航空航天大学</h3>
                            <span class="education__specialty">电子信息非全日制</span>
                        </div>
                    </div>

                </div>

            </section>

            <!--===== SERVICES =====-->
            <section class="service section" id="services">
                <span class="section-subtitle">工作经验</span>
                <h2 class="section-title">实习经历</h2>

                <div class="services__container bd-grid">
                    <div class="education__content">
                        <div>
                            <h3 class="education__year">2020.09 — 2021.12</h3>
                            <span class="education__university">职位</span>
                        </div>

                        <div class="education__time">
                            <span class="education__rounder"></span>
                        </div>

                        <div>
                            <h3 class="education__race">北京开果传媒科技有限公司</h3>
                            <span class="education__specialty">前端开发实习生</span>
                        </div>
                    </div>
                    <div class="services__content">
                        <h3 class="services__title">工作技能</h3>
                        <p class="services__description">
                            1. 熟练掌握 HTML 和 CSS，熟悉 JavaScript 核心技术，掌握 ES5 丶 ES6 常用语法<br>
                            2. 熟练使用 Vue， Vue 有深入的研究<br>
                            3. 熟练使用 webpack 对模块进行打包，使用 loader 和 plugin<br>
                            4. 了解计算机网络知识、前端安全<br>
                            5. 使用过 Git 进行 版本控制、代码托管、合作开发<br>
                        </p>
                    </div>
                </div>
            </section>

            <section class="service section" id="services">
                <span class="section-subtitle">项目经验</span>
                <h2 class="section-title">项目经历1</h2>

                <div class="services__container bd-grid">
                    <div class="education__content">
                        <div>
                            <h3 class="education__year">2020.09 — 2021.03</h3>
                            <span class="education__university">职位</span>
                        </div>

                        <div class="education__time">
                            <span class="education__rounder"></span>
                        </div>

                        <div>
                            <h3 class="education__race">电商后台管理系统</h3>
                            <span class="education__specialty">前端开发实习生</span>
                        </div>
                    </div>
                    <div class="services__content">
                        <h3 class="services__title">项目描述</h3>
                        <p class="services__description">
                            1. Vue、Vuex、webpack、axios、swiper<br>
                            2. 大型文件上传和断点续传<br>
                            3. 把数据请求和共用方法封装好<br>
                            4. 抽离公共组件，减少冗余代码的产生<br>
                            5. 为了项⽬代码规范，引⼊ ESLint 和 Prettier，使⽤ commitizen 对提交信息规范化<br>
                        </p>
                    </div>
                </div>

                <span class="section-subtitle"></span>
                <h2 class="section-title">项目经历2</h2>

                <div class="services__container bd-grid">
                    <div class="education__content">
                        <div>
                            <h3 class="education__year">2020.03 — 2021.12</h3>
                            <span class="education__university">职位</span>
                        </div>

                        <div class="education__time">
                            <span class="education__rounder"></span>
                        </div>

                        <div>
                            <h3 class="education__race">Fabrique移动端开发</h3>
                            <span class="education__specialty">前端开发实习生</span>
                        </div>
                    </div>
                    <div class="services__content">
                        <h3 class="services__title">项目描述</h3>
                        <p class="services__description">
                            1. 作为项目成员，使用 Vue、Webpack、Element-UI、Sass 进行项目的开发<br>
                            2. 提升性能优化，如首屏渲染速度加快、长列表虚拟优化<br>
                            3. 项目的性能优化，如减少 webpack 构建时间、减少 webpack 打包体积<br>
                            4. 封装组件进行复用，能根据不同需求解决，减少开发成本以及维护成本<br>
                        </p>
                    </div>
                </div>
            </section>


            <!--===== PROJECT IN MIND =====-->
            <!-- <section class="project section">
                <div class="project__container bd-grid">
                    <div class="project__data">
                        <h2 class="section-title project__title">你有项目吗？</h2>
                        <p class="project__description">如果你有</p>
                        <a href="#contact" class="button button__light">联系我</a>
                    </div>

                    <img src="img/projectmind.png" alt="" class="project__img">
                </div>
            </section> -->

            <!--===== WORKS =====-->
            <!-- <section class="works section" id="works">
                <span class="section-subtitle">我的项目</span>
                <h2 class="section-title">项目展示</h2>

                <div class="works__container bd-grid">
                    <div class="works__img">
                        <img src="img/work1.jpg" alt="">

                        <div class="works__data">
                            <a href="https://gitee.com/chuanjiujiu/jingtaiyemian" class="works__link" target="blank"><i class='bx bx-link-alt'></i></a>
                            <span class="works__title">HTML+CSS静态电商项目</span>
                        </div>
                    </div>

                    <div class="works__img">
                        <img src="img/work2.jpg" alt="">

                        <div class="works__data">
                            <a href="" class="works__link"><i class='bx bx-link-alt'></i></a>
                            <span class="works__title">VUE电商后台管理项目</span>
                        </div>
                    </div>

                    <div class="works__img">
                        <img src="img/work3.jpg" alt="">

                        <div class="works__data">
                            <a href="https://gitee.com/chuanjiujiu/javascript-based-games" class="works__link"><i class='bx bx-link-alt'></i></a>
                            <span class="works__title">像素鸟小游戏</span>
                        </div>
                    </div>
                </div>
            </section> -->

            <!--===== CONTACT =====-->
            <!-- <section class="contact section" id="contact">
                <span class="section-subtitle">联系我</span>
                <h2 class="section-title">联系我</h2>

                <div class="contact__container bd-grid">
                    <form action="" class="contact__form">
                        <div class="contact__inputs">
                            <input type="text" placeholder='姓名' class="contact__input">
                            <input type="text" placeholder='邮箱' class="contact__input">
                        </div>

                        <input type="text" placeholder='项目' class="contact__input">
                        
                        <textarea name="" id="" cols="0" rows="10" placeholder='信息' class="contact__input"></textarea>
                        <input type="submit" value="发送信息" class="button contact__button">
                    </form>

                    <div>
                        <div class="contact__info">
                            <h3 class="contact__subtitle">手机号码</h3>
                            <span class="contact__text">19801326330</span>
                        </div>

                        <div class="contact__info">
                            <h3 class="contact__subtitle">邮箱</h3>
                            <span class="contact__text">1154914252@qq.com</span>
                        </div>

                        <div class="contact__info">
                            <h3 class="contact__subtitle">地址</h3>
                            <span class="contact__text">北京市 朝阳区</span>
                        </div>
                    </div>
                </div>
            </section> -->
        </main>

        <!--===== FOOTER =====-->
        <footer class="footer section">
            <div class="footer__container bd-grid">
                <h1 class="footer__title">川九九</h1>
                <p class="footer__description">川九九的个人网站</p>

                <!-- <div class="footer__social">
                    <a href="#" class="footer__link"><i class='bx bxl-instagram'></i></a>
                    <a href="#" class="footer__link"><i class='bx bxl-facebook'></i></a>
                    <a href="#" class="footer__link"><i class='bx bxl-twitter'></i></a>
                </div> -->

                <p class="footer__copy">All right reserved by chuanjiuju - 2022</p>
            </div>
        </footer>
        <!--===== MAIN JS =====-->
        <script src="js.js"></script>
    </body>
</html>